import utils from './classUtils'

/**
 * 表格单元格合并 + 可编辑
 * @type {{props: {datas: {type: ArrayConstructor, default: (function(): Array)}}, data(): *, methods: {initData(): void, columnMerageInit(): void, objectSpanMethod({row: *, column: *, rowIndex: *, columnIndex: *}): (*|void), handleCellClick(*, *, *=, *): void, isShowCellInput(*, *, *=): void}}}
 */
export const mixinColMerage = {
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      col1: [], // 存放第一列单元格合并信息
      col2: [], // 存放第二列单元格合并信息
      col3: [], // 存放第三列单元格合并信息
      tableData: [], // 表格数据
      colNames: ['text1', 'text2', 'text3']
    }
  },
  methods: {
    initData () {
      // 为每一行数据添加isShow,控制最后一列显示input还是text
      let datas_ = this.datas.map(item => {
        item.isShow = true
        return item
      })
      // 此处需要深度克隆表格数据
      this.tableData = JSON.parse(JSON.stringify(datas_))
    },
    columnMerageInit () {
      let p1, p2, p3
      this.tableData.reduce((pre, cur, ix) => {
        // console.log(pre, cur)
        if (ix === 0) {
          this.col1.push(1)
          this.col2.push(1)
          this.col3.push(1)
          p1 = 0
          p2 = 0
          p3 = 0
        } else {
          if (pre[this.colNames[0]] === cur[this.colNames[0]]) {
            this.col1[p1] += 1
            this.col1.push(0)
          } else {
            this.col1.push(1)
            p1 = ix
          }
          if (pre[this.colNames[1]] === cur[this.colNames[1]]) {
            this.col2[p2] += 1
            this.col2.push(0)
          } else {
            this.col2.push(1)
            p2 = ix
          }
          if (pre[this.colNames[2]] === cur[this.colNames[2]]) {
            this.col3[p3] += 1
            this.col3.push(0)
          } else {
            this.col3.push(1)
            p3 = ix
          }
        }
        return cur
      }, {})
    },
    // 表格合并行
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 此处只涉及向下合并,所以咧
      if (columnIndex === 0) {
        return {
          rowspan: this.col1[rowIndex],
          colspan: 1
        }
      }
      if (columnIndex === 1) {
        return {
          rowspan: this.col2[rowIndex],
          colspan: 1
        }
      }
      if (columnIndex === 2) {
        return {
          rowspan: this.col3[rowIndex],
          colspan: 1
        }
      }
    },
    // 单元格点击后，显示input，并让input 获取焦点
    handleCellClick (row, column, cell, event) {
      /**
       * 注意: 当 @cell-click="handleCellClick" 和 :span-method="objectSpanMethod"
       * 同时使用时获取的row不对,必须根据cell结点手动获取当前单元格索引
       */
      let ix = utils.getRowId(cell)
      this.isShowCellInput(ix, column.label, cell)
    },
    // 设置当前点击单元格input框显示/隐藏未点击单元
    isShowCellInput (ix, colName, cell) {
      this.tableData.forEach((item, index) => {
        if (ix === index) {
          if (colName === '备注') {
            item.isShow = false
            // 当切换到input,聚焦input框
            this.$nextTick(() => {
              cell.getElementsByTagName('input')[0].focus()
            })
          } else {
            item.isShow = true
          }
        } else {
          item.isShow = true
        }
      })
    }
  }
}
